<template>
  <div>
    <div id="container"></div>
    <div id="panel"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      lng: 0,
      lat: 0,
    };
  },
  created() {
    this.getLocation();
  },
  mounted() {
    this.initMap_();
  },
  methods: {
    getLocation() {
      //获取当前位置
      navigator.geolocation.getCurrentPosition(
        (res) => {
          this.lat = res.coords.latitude;
          this.lng = res.coords.longitude;
          console.log(this.lat, "tangtttt");

          //res.coords.latitude
        },
        (err) => {
          console.log(err);
        },
        {
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0,
        }
      );
    },
    initMap_() {
      var map = new AMap.Map("container", {
        center: [109.4466, 24.3306],
        zoom: 14,
      });
      var drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        province: "京", // 车牌省份的汉字缩写
        map: map,
        panel: "panel",
      };
      var driving = new AMap.Driving(drivingOption);
      console.log(this.lat, "tangtttt----");
      //   console.log(this.$route.query.one, this.$route.query.two),
      // 根据起终点经纬度规划驾车导航路线
      driving.search(
        new AMap.LngLat(106.083746, 24.833652),

        new AMap.LngLat(this.$route.query.one, this.$route.query.two),
        function (status, result) {
          // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            if (result.routes && result.routes.length) {
              // 绘制第一条路线，也可以按需求绘制其它几条路线
              drawRoute(result.routes[0]);
              log.success(
                "距离目的地大约" + result.routes[0].distance / 1000 + "km"
              );
              // alert('距离目的地大约'+result.routes[0].distance/1000+'km');
            }
          } else {
            console.log(result);
            log.error("获取驾车数据失败：" + result);
          }
        }
      );
      function drawRoute(route) {
        var path = parseRouteToPath(route);

        var startMarker = new AMap.Marker({
          position: path[0],
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
          map: map,
        });
        var endMarker = new AMap.Marker({
          position: path[path.length - 1],
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
          map: map,
        });

        var routeLine = new AMap.Polyline({
          path: path,
          isOutline: true,
          outlineColor: "#ffeeee",
          borderWeight: 2,
          strokeWeight: 5,
          strokeColor: "#0091ff",
          lineJoin: "round",
        });
        routeLine.setMap(map);
        // 调整视野达到最佳显示区域
        map.setFitView([startMarker, endMarker, routeLine]);
      }
      function parseRouteToPath(route) {
        var path = [];

        for (var i = 0, l = route.steps.length; i < l; i++) {
          var step = route.steps[i];

          for (var j = 0, n = step.path.length; j < n; j++) {
            path.push(step.path[j]);
          }
        }
        return path;
      }
    },
  },
};
</script>

<style scoped>
#container {
  width: 998px;
  height: 625px;
  border-radius: 10px;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 50px;
  right: 10px;
  width: 280px;
  border-radius: 4px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>